<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>
      Toggle Test
    </title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
    <script type="text/javascript">
    //<![CDATA[
    $(document).ready(function() {
        $('.toggle').hide();
        $('img').attr('src','images/checkmark1.jpg');
        $('.toggler').click( function() {
          var target = this.id + '_content';
          // Use ID-selectors to toggle a single element.
          $('#' + target).toggle();
          // Use class-selectors to toggle groups of elements.
          $('.' + target).toggle();
          $('.toggle.always').toggle();
        });
        $('#toggle_everything').click( function() { $('.toggle').toggle(); });
    });
    //]]></script>
  </head>
  <body>
    <div class="toggler" id="toggle1"><img/>Toggle 1</div>
    <div class="toggler" id="toggle2"><img/>Toggle 2</div>
    <div class="toggler" id="toggle3"><img/>Toggle 3</div>
    <div id="toggle_everything"><img/>Toggle Everything</div>
    <hr/>
    <div class="toggle" id="toggle1_content">only toggle1</div>
    <div class="toggle" id="toggle2_content">only toggle2</div>
    <div class="toggle" id="toggle3_content">only toggle3</div>
    <div class="toggle always">always toggled</div>
    <div class="toggle toggle1_content toggle2_content">toggle1 and toggle2</div>
    <div class="toggle toggle1_content toggle3_content">toggle1 and toggle3</div>
    <div class="toggle toggle2_content toggle3_content">toggle2 and toggle3</div>
    <div class="toggle toggle1_content toggle2_content toggle3_content">toggle1, toggle2 and toggle3</div>
  </body>
</html>